<template>
  <div class="auth-product-box">
    <el-container class="container-box">
      <!-- 头部 -->
      <el-header height="auto">
        <h3>{{ name }}</h3>
        <el-form
          :inline="true"
          ref="formData"
          :model="formData"
          class="formData-box">
          <el-form-item
            label="审核状态"
            prop="status">
            <el-select
              v-model="formData.status"
              placeholder="请选择">
              <el-option
                v-for="(item,index) in searchParams"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="产品名称"
            prop="chName">
            <el-input
              v-model="formData.chName"
              placeholder="请输入" />
          </el-form-item>
          <el-form-item
            label="产品编码"
            prop="hosProdCode">
            <el-input
              v-model="formData.hosProdCode"
              placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click.stop="onClear(formData)">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
            <el-button
              type="primary"
              @click.stop="onSubmit"
              :class="{'isAddWidth':submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <div class="button-box">
        <el-button
          type="primary"
          @click="batchAdopt">
          <i class="el-icon-finished"/>
          批量通过</el-button>
        <el-button
          type="primary"
          @click="batchRefuse">
          <i class="el-icon-document-delete"/>
          批量拒绝</el-button>
        <el-button
          type="primary"
          @click="batchStop">
          <i class="el-icon-remove-outline"/>
          批量停用</el-button>
      </div>
      <!-- 内容 -->
      <el-editable
        class="editable-box"
        :data="tableData"
        v-loading="tableLoading"
        height="200px"
        :columns="productColumns"
        @selection-change="handleSelectionChange"
      >
        <template
          slot="default-num"
          slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
        <!-- 注册证 -->
        <template
          slot="default-auth1"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="lookregisterCard(scope)"
            type="text">查看</el-button>
        </template>
        <!-- 授权书 -->
        <template
          slot="default-auth2"
          slot-scope="scope">
          <el-button
            size="small"
            :disabled="true"
            @click.stop="addEnterprise(scope)"
            type="text">查看</el-button>
        </template>
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            v-if="scope.row.status === 1"
            size="small"
            @click.stop="toPass(scope)"
            type="text"
          >通过</el-button>
          <el-button
            v-if="scope.row.status === 1"
            size="small"
            @click.stop="toRefuse(scope)"
            type="text"
          >拒绝</el-button>
          <el-button
            v-if="scope.row.status === 2"
            size="small"
            @click.stop="toStart(scope)"
            type="text"
          >停用</el-button>
        </template>
      </el-editable>
      <el-pagination
        align="right"
        style="margin-top:20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="PAGE_NUMBER"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
  </div>
</template>
<script>
import paginationMixin from '@mixins/paginationMixin'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import ElEditable from '@components/el-editable/index.vue'
import { productColumns, searchParams } from './const.js'
import { hasIn } from 'lodash'
import {
  // examineList,
  // batchChange,
  getCertificate,
  getApplyauditProd,
  getApplyauditProdStop,
  getApplyProdByConstrict
} from '@const/beforeSettleApi'

export default {
  mixins: [paginationMixin],
  components: { ElEditable },
  data () {
    return {
      name: '',
      checkboxArr: [],
      submitLoading: false,
      tableLoading: false,
      //   列表搜索
      formData: {
        status: null,
        chName: null,
        hosProdCode: null
      },
      searchParams, // 状态
      //   列表产品
      tableData: [],
      productColumns,

      PAGE_NUMBER, // 分页类型
      PAGINATION_LAYOUT // 分页功能 this.page.total = hasIn(data, ['payload', 'totalElements']) ? data.payload.totalElements : 0
    }
  },
  created () {
    this.initNavButtons()
    this.getList()
    this.name = this.$route.query.name
  },
  methods: {
    // 获取数据-列表
    getList () {
      this.loading = true
      this.submitLoading = true
      const data = {
        constrictId: this.$route.query.id,
        hospitalId: this.$store.state.companyId,
        page: this.page.page,
        pageSize: this.page.size,
        ...this.formData

        // page: this.page.page,
        // pageSize: this.page.size,
        // ...this.formData
      }
      this.$axios
        .post(getApplyProdByConstrict, data)
        .then(res => {
          const { data } = res
          if (!Number(data.code)) {
            this.tableData = hasIn(data, ['payload', 'content'])
              ? data.payload.content
              : []
            this.page.total = hasIn(data, ['payload', 'totalElements'])
              ? data.payload.totalElements
              : 0
          }
        })
        .finally(() => {
          this.loading = false
          this.submitLoading = false
        })
    },
    // 列表-查询
    onSubmit () {
      this.page.page = 1
      this.getList()
    },
    // 列表-重置
    onClear () {
      this.$refs['formData'].resetFields()
    },
    // 查看注册证
    lookregisterCard (e) {
      if (!e.row.certificateId) {
        this.$message({
          type: 'warning',
          message: '此产品暂时没有注册证！',
          duration: '800'
        })
      } else {
        this.regCard = true
        this.$axios
          .$get(getCertificate, {
            params: {
              id: e.row.certificateId
            }
          })
          .then(res => {
            if (res.payload.licenseUrl) {
              this.$pdfViewer({ url: res.payload.licenseUrl, title: '注册证' })
            }
          })
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    // 初始化 导航栏 按钮组
    initNavButtons () {
      let obj = {
        type: 'btn',
        arr: [
          {
            val: '返回',
            handle: this.goBack
          }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    // 批量通过
    batchAdopt () {
      if (this.checkboxArr.length === 0) {
        this.$message({ message: '请选择产品！', type: 'warning' })
        return false
      }
      let id = this.checkboxArr.map(item => {
        let obj = {
          id: item.id,
          status: 2
        }
        return obj
      })
      this.authProduct(id, '通过', '审核已通过')
    },
    // 批量拒绝
    batchRefuse () {
      if (this.checkboxArr.length === 0) {
        this.$message({ message: '请选择产品！', type: 'warning' })
        return false
      }
      let id = this.checkboxArr.map(item => {
        let obj = {
          id: item.id,
          status: 3
        }
        return obj
      })
      this.authProduct(id, '拒绝', '审核已拒绝')
    },
    // 批量停用
    batchStop () {
      if (this.checkboxArr.length === 0) {
        this.$message({ message: '请选择产品！', type: 'warning' })
        return false
      }
      let id = this.checkboxArr.map(item => {
        let obj = {
          id: item.id
        }
        return obj
      })
      this.authProductStop(id, '停用', '已停用')
    },
    // 通过
    toPass (scope) {
      let data = {
        id: scope.row.id,
        status: 2
      }
      let arr = []
      arr.push(data)
      this.authProduct(arr, '通过', '审核已通过')
    },
    // 拒绝
    toRefuse (scope) {
      let data = {
        id: scope.row.id,
        status: 3
      }
      let arr = []
      arr.push(data)
      this.authProduct(arr, '拒绝', '审核已拒绝')
    },
    // 停用
    toStart (scope) {
      let data = {
        id: scope.row.id
      }
      let arr = []
      arr.push(data)
      this.authProductStop(arr, '停用', '已停用')
    },
    authProduct (dataBody, tip, msg) {
      this.$confirm('确定' + tip + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.$axios({
          method: 'post',
          url: getApplyauditProd,
          data: dataBody
        }).then(res => {
          if (res.data.code * 1 === 0) {
            this.$message({ message: msg, type: 'success' })
          }
          this.getList()
        })
      })
    },
    authProductStop (dataBody, tip, msg) {
      this.$confirm('确定' + tip + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.$axios({
          method: 'post',
          url: getApplyauditProdStop,
          data: dataBody
        }).then(res => {
          if (res.data.code * 1 === 0) {
            this.$message({ message: msg, type: 'success' })
          }
          this.getList()
        })
      })
    },
    // 查看注册证
    addEnterprise (e) {
      //  this.regCard = true
      // this.$axios
      //   .$get(getCertificate, {
      //     params: {
      //       id: e.row.certificateId
      //     }
      //   })
      //   .then(res => {
      //     this.regCardImage = res.payload.licenseUrl
      //   })
      //   .finally(res => {
      //     this.tableLoading = false
      //   })
    },
    // 复选框触发事件
    handleSelectionChange (arr) {
      this.checkboxArr = arr
    },
    // 分页
    handleSizeChange (size) {
      this.page.size = size
      this.getList()
    },
    handleCurrentChange (curPage) {
      this.page.page = curPage
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.auth-product-box {
  .container-box {
    height: 100%;
    overflow: auto;

    h3 {
      margin: 10px 0;
    }

    .button-box {
      padding-bottom: 10px;
    }
  }
}
</style>
